import React, { useEffect } from "react";
import "./App.css";
import { Routes, Route, useLocation, useNavigate } from "react-router-dom";
import Home from "./views/Home/index";
import NotFound from "./views/404";
import Login from "./views/Login";
import BookList from "./views/BookList";
import ListenStory from "./views/ListenStory";
import Mine from "./views/Mine";
import SelectCar from "./components/SelectCar";
import BookDetail from "./views/BookDetail";
export default function App() {
  let nav = useNavigate();
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        minHeight: "100vh",
      }}
    >
      <section style={{ flex: "1", overflow: "auto" }}>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="/mine" element={<Mine />}></Route>
          <Route path="/booklist" element={<BookList />}></Route>
          <Route path="/bookdetail" element={<BookDetail />}></Route>
          <Route path="/listenstory" element={<ListenStory />}></Route>
          <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </section>
      <SelectCar />
      <div style={{ height: 50 }}></div>
    </div>
  );
}
